import { defineComponent, watchEffect, ref } from 'vue'
import { NInput, NSwitch, NButton, NSelect } from 'naive-ui'
import type { PropType } from 'vue'
import type { basicState } from '@/types/baseConfig'
import CodeEdit from '@/components/nComponents/CodeEdit'
export default defineComponent({
  props: {
    compData: {
      type: Object as PropType<basicState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save'],
  setup(props, { emit }) {
    const info = ref<basicState>({
      diaWidth: '700px',
      inline: false,
      showFeedback: true,
      showLabel: true,
      showRequireMark: true
    })
    watchEffect(() => {
      if (props.compData) {
        info.value = props.compData
      }
    })
    const setNull = (
      e:
        | 'showRequireMark'
        | 'labelWidth'
        | 'labelAlign'
        | 'labelPlacement'
        | 'requireMarkPlacement'
        | 'size'
    ) => {
      info.value[e] = null
      setTimeout(() => {
        delete info.value[e]
        handOptions()
      }, 80)
    }

    let timer: any = null
    const handOptions = () => {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        emit('save', info.value)
      }, 450)
    }

    const codeRef = ref()
    const handEditCode = () => {
      codeRef.value.open({
        key: '',
        labelKey: '',
        title: '表单属性',
        isDesc: false,
        value: info.value,
        language: 'json'
      })
    }
    const codeChange = (e: basicState) => {
      info.value = e
      handOptions()
    }

    /**
     *  下拉框值
     * */
    const labelAlignOptions = [
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'right',
        value: 'right'
      }
    ]
    const labelPlacementOptions = [
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'top',
        value: 'top'
      }
    ]
    const requireMarkPlacementOptions = [
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'right',
        value: 'right'
      },
      {
        label: 'right-hanging',
        value: 'right-hanging'
      }
    ]
    const sizeOptions = [
      {
        label: 'small',
        value: 'small'
      },
      {
        label: 'medium',
        value: 'medium'
      },
      {
        label: 'large',
        value: 'large'
      }
    ]
    return () => (
      <>
        <div class="BaseEdit">
          <div class="cell pl-[10px] pr-[10px] flex items-center">
            <i class="esayIcon esayIcon-daima cursor-pointer" onClick={handEditCode}></i>
            <div class="title ml-[5px]">表单属性</div>
          </div>
          <div class="has-scrollbar">
            <div class="nano-content">
              <div class="pl-[10px] pr-[10px]">
                <div class="mt-[20px]">
                  <div class="settingItemTitle">弹框宽度</div>
                  <div class="edit-input">
                    <NInput
                      v-model:value={info.value.diaWidth}
                      placeholder="请输入"
                      clearable
                      onBlur={handOptions}
                    />
                  </div>
                </div>
                <div class="mt-[20px] flex items-center">
                  <div class="settingItemTitle">是否展示为行内表单</div>
                  <div class="flex-1 ml-[5px]">
                    <NSwitch v-model:value={info.value.inline} onUpdateValue={handOptions} />
                  </div>
                </div>
                <div class="mt-[20px] flex items-center">
                  <div class="settingItemTitle">是否展示标签</div>
                  <div class="flex-1 ml-[5px]">
                    <NSwitch v-model:value={info.value.showLabel} onUpdateValue={handOptions} />
                  </div>
                </div>
                <div class="mt-[20px] flex items-center">
                  <div class="settingItemTitle">是否展示校验反馈</div>
                  <div class="flex-1 ml-[5px]">
                    <NSwitch v-model:value={info.value.showFeedback} onUpdateValue={handOptions} />
                  </div>
                </div>
                <div class="mt-5 flex items-center">
                  <div class="settingItemTitle">是否展示必填的星号</div>
                  <div class="ml-[10px] flex-1 flex items-center">
                    <NButton
                      size="small"
                      type={info.value.showRequireMark === undefined ? 'primary' : 'default'}
                      onClick={() => setNull('showRequireMark')}
                    >
                      <span>空</span>
                    </NButton>
                    <NSwitch
                      class="ml-[10px]"
                      v-model:value={info.value.showRequireMark}
                      onUpdateValue={handOptions}
                    />
                  </div>
                </div>
                <div class="mt-5 flex items-center">
                  <div class="settingItemTitle">labelWidth</div>
                  <div class="ml-[10px] flex-1 flex items-center">
                    <NButton
                      size="small"
                      type={info.value.labelWidth === undefined ? 'primary' : 'default'}
                      onClick={() => setNull('labelWidth')}
                    >
                      <span>空</span>
                    </NButton>
                    <NInput
                      class="ml-[10px]"
                      v-model:value={info.value.labelWidth}
                      placeholder="auto | number | string"
                      clearable
                      onBlur={handOptions}
                    />
                  </div>
                </div>
                <div class="mt-5 flex items-center">
                  <div class="settingItemTitle">标签的文本对齐方式</div>
                  <div class="ml-[10px] flex-1 flex items-center">
                    <NButton
                      size="small"
                      type={info.value.labelAlign === undefined ? 'primary' : 'default'}
                      onClick={() => setNull('labelAlign')}
                    >
                      <span>空</span>
                    </NButton>
                    <NSelect
                      class="ml-[10px]"
                      v-model:value={info.value.labelAlign}
                      options={labelAlignOptions}
                      placeholder="请选择"
                      onUpdateValue={handOptions}
                    />
                  </div>
                </div>
                <div class="mt-5 flex items-center">
                  <div class="settingItemTitle">label-placement</div>
                  <div class="ml-[10px] flex-1 flex items-center">
                    <NButton
                      size="small"
                      type={info.value.labelPlacement === undefined ? 'primary' : 'default'}
                      onClick={() => setNull('labelPlacement')}
                    >
                      <span>空</span>
                    </NButton>
                    <NSelect
                      class="ml-[10px]"
                      v-model:value={info.value.labelPlacement}
                      options={labelPlacementOptions}
                      placeholder="请选择"
                      onUpdateValue={handOptions}
                    />
                  </div>
                </div>
                <div class="mt-5 flex items-center">
                  <div class="settingItemTitle">必填的星号的位置</div>
                  <div class="ml-[10px] flex-1 flex items-center">
                    <NButton
                      size="small"
                      type={info.value.requireMarkPlacement === undefined ? 'primary' : 'default'}
                      onClick={() => setNull('requireMarkPlacement')}
                    >
                      <span>空</span>
                    </NButton>
                    <NSelect
                      class="ml-[10px]"
                      v-model:value={info.value.requireMarkPlacement}
                      options={requireMarkPlacementOptions}
                      placeholder="请选择"
                      onUpdateValue={handOptions}
                    />
                  </div>
                </div>
                <div class="mt-5 flex items-center">
                  <div class="settingItemTitle">尺寸</div>
                  <div class="ml-[10px] flex-1 flex items-center">
                    <NButton
                      size="small"
                      type={info.value.size === undefined ? 'primary' : 'default'}
                      onClick={() => setNull('size')}
                    >
                      <span>空</span>
                    </NButton>
                    <NSelect
                      class="flex-1 ml-[10px]"
                      v-model:value={info.value.size}
                      options={sizeOptions}
                      placeholder="请选择"
                      onUpdateValue={handOptions}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <CodeEdit ref={codeRef} onSave={codeChange} />
      </>
    )
  }
})
